<!DOCTYPE html>
<html lang="zh-CN"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>新增收货地址</title>
    <meta charset="UTF-8">
    <title>新增收货地址</title>
    <meta name="keywords" content="新增收货地址"/>
    <meta name="description" content="新增收货地址"/>
    <meta name="viewport"
          content="width=device-width,initial-scale=1, maximum-scale=1,minimum-scale=1, user-scalable=no">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="format-detection" content="telephone=no"/>
    <meta name="viewport" content="width=device-width,viewport-fit=cover">
    <link th:href="@{/shoppingApi/css/weui.min.css}" rel="stylesheet">
    <link th:href="@{/shoppingApi/css/jquery-weui.min.css}" rel="stylesheet">
    <meta name="_csrf" th:content="${_csrf.token}"/>
    <meta name="_csrf_header"  th:content="${_csrf.headerName}"/>
</head>
<body ontouchstart>
<!--<div class="weui-cells__title">表单</div>-->
<div class="weui-cells weui-cells_form">
    <div class="weui-cell">
        <div class="weui-cell__hd"><label class="weui-label" for="name">姓名</label></div>
        <div class="weui-cell__bd">
            <input class="weui-input" th:value="${''}" id="name" name="name" type="text" placeholder="请输入姓名">
        </div>
    </div>
    <div class="weui-cell">
        <div class="weui-cell__hd">
            <label class="weui-label" for="phone">手机号</label>
        </div>
        <div class="weui-cell__bd">
            <input class="weui-input" id="phone" th:value="${''}"  name="phone" type="tel" placeholder="请输入手机号">
        </div>
    </div>
    <div class="weui-cell">
        <div class="weui-cell__hd"><label for="address" class="weui-label">地区</label></div>
        <div class="weui-cell__bd">
            <input class="weui-input" id="address" th:value="${''}" type="text" placeholder="请选择地区" readonly>
        </div>
    </div>
    <div class="weui-cell">
        <div class="weui-cell__hd"><label for="detailAddress" class="weui-label">详细地址</label></div>
        <div class="weui-cell__bd">
            <input class="weui-input" id="detailAddress" th:value="${''}" name="detailAddress" type="text" placeholder="请输入详细地址">
        </div>
    </div>
    <div class="weui-cell weui-cell_switch">
        <div class="weui-cell__bd">默认地址</div>
        <div class="weui-cell__ft">
            <input class="weui-switch" name="marriage" id="isDefault" type="checkbox">
        </div>
    </div>
    <div class="weui-cell weui-cell_switch">
        <input type="button" value="保存" class="weui-btn weui-btn_primary" id="sure" th:data="${'0'}" onclick="saveArea(this)">
    </div>
</div>
</body>
<script th:src="@{/layui/jquery.min.js}"></script>
<script th:src="@{/shoppingApi/js/fastclick.js}"></script>
<script>
    $(function() {
        FastClick.attach(document.body);
    });
</script>
<script th:src="@{/shoppingApi/js/jquery-weui.min.js}"></script>
<script th:src="@{/shoppingApi/js/city-picker.min.js}"></script>
<script>
    $("#address").cityPicker({
        title: "选择地址"
    });
    var header = $("meta[name='_csrf_header']").attr("content");
    var token =$("meta[name='_csrf']").attr("content");

    function saveArea(obj) {
        var id=$(obj).attr('data');
        var name=$("#name").val();
        var phone=$("#phone").val();
        var address=$.trim($("#address").attr('data'));
        if(address.split(',').length!=3){
            alert("请选择完地址(省-市-区)!");return;
        }
        var detailAddress=$("#detailAddress").val();
        var ischecked=$("#isDefault").is(":checked");
        var isdefault=0;
        if(ischecked==true){
            isdefault=1;
        }
        //alert(id+"---"+name+"---"+phone+"---"+address+"---"+detailAddress+"---"+ischecked+"---");return;
        $.ajax({
            url: '/wap/addressAddOrEdit?id='+id+"&addressIds="+address+"&detailAddress="+detailAddress+"&name="+name+"&phone="+phone+"&isdefault="+isdefault,
            type: 'post',
            dataType: 'json',
            contentType: 'application/json',
            async: false,
            success: function(data){
                if (data.data>0) {
                    alert("成功!");
                } else {
                    alert("失败!");
                }
            },
            beforeSend : function(xhr) {
                xhr.setRequestHeader(header, token);
            }
        });
    }

    // var sjId;
    // var provinceName="",cityName="",areaName="";
    // var provinceId=0,cityId=0,areaId=0;
    // $(document).ready(function(){
    //     layui.use('form', function(){
    //         var form = layui.form;
    //         form.on('select(selectyj)', function(data){
    //             var yjId=data.value;
    //             loadrj(yjId)//调用二级
    //             provinceName=data.elem[data.elem.selectedIndex].text;
    //             provinceId=yjId+",";
    //             $("#address").attr('data',provinceId);
    //         });
    //         form.render();
    //
    //         form.on('select(selectrj)', function(data){
    //             var rjId=data.value;
    //             loadsj(rjId);
    //             cityName=data.elem[data.elem.selectedIndex].text;
    //             cityId=rjId+",";
    //             $("#address").attr('data',cityId);
    //         });
    //         form.render();
    //
    //         form.on('select(selectsj)', function(data){
    //             sjId=data.value;
    //             areaName=data.elem[data.elem.selectedIndex].text;
    //             areaId=sjId;
    //             $("#address").val(provinceName+cityName+areaName);
    //             $("#address").attr('data',provinceId+cityId+areaId)
    //         });
    //         form.render();
    //     });
    //     var date=new Date();
    //     var year=date.getFullYear();
    //     var productNo=Math.random().toString().substring(2);
    //     var str=year.toString()+productNo;
    //     $("#productNo").attr("value",str);
    // });
</script>
</html>